<div class="container-xl">
    <!-- Page title -->
    <div class="page-header d-print-none">
        <div class="row align-items-center">
            <div class="col">
                <h2 class="page-title">
                    Typography
                </h2>
            </div>
        </div>
    </div>
    <div class="row row-cards">
        <div class="col-12 col-md-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Card title</div>
                </div>
                <div class="card-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto corporis
                    cumque debitis dicta
                    dolores error esse explicabo incidunt inventore minima, officiis quis reprehenderit saepe
                    sed sit vel voluptatem,
                    voluptatibus?
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Headings</div>
                </div>
                <div class="card-body">
                    <h1>h1. Heading text</h1>
                    <h2>h2. Heading text</h2>
                    <h3>h3. Heading text</h3>
                    <h4>h4. Heading text</h4>
                    <h5>h5. Heading text</h5>
                    <h6>h6. Heading text</h6>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Headings with secondary text</div>
                </div>
                <div class="card-body">
                    <h1>h1. Heading text
                        <small>Secondary text</small>
                    </h1>
                    <h2>h2. Heading text
                        <small>Secondary text</small>
                    </h2>
                    <h3>h3. Heading text
                        <small>Secondary text</small>
                    </h3>
                    <h4>h4. Heading text
                        <small>Secondary text</small>
                    </h4>
                    <h5>h5. Heading text
                        <small>Secondary text</small>
                    </h5>
                    <h6>h6. Heading text
                        <small>Secondary text</small>
                    </h6>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Body text</div>
                </div>
                <div class="card-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare iaculis purus,
                        eget gravida
                        est
                        lacinia at. Nam magna dolor, vestibulum ut consequat in, dictum a metus.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid amet asperiores
                        assumenda at,
                        commodi
                        est, et, fugiat in ipsam iure mollitia optio quas reiciendis rem repellat sed similique
                        voluptatibus.</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Lead body</div>
                </div>
                <div class="card-body">
                    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare
                        iaculis purus,
                        eget
                        gravida est lacinia at. Nam magna dolor, vestibulum ut consequat in, dictum a metus.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid amet asperiores
                        assumenda at,
                        commodi
                        est, et, fugiat in ipsam iure mollitia.</p>
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Alignment types</div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12 col-md-4">
                            <p class="text-start">Left aligned text.</p>
                            <p class="text-start">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                Alias aliquid
                                beatae
                                consequatur culpa,
                                deserunt, doloribus ea et inventore iste molestias nihil nobis officiis qui
                                reiciendis sint
                                totam
                                ullam veritatis vitae.</p>
                        </div>
                        <div class="col-12 col-md-4">
                            <p class="text-center">Center aligned text.</p>
                            <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                Aperiam
                                consequatur
                                error esse, facilis
                                harum, ipsa libero minima modi nisi nobis obcaecati odit officia officiis quis
                                quisquam quos
                                sapiente, sunt. Ab.</p>
                        </div>
                        <div class="col-12 col-md-4">
                            <p class="text-end">Right aligned text.</p>
                            <p class="text-end">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                Consectetur
                                deleniti
                                dicta eius excepturi
                                facere nulla quia sequi sit soluta ullam! Animi commodi cupiditate, enim id
                                maiores minus
                                mollitia
                                sed temporibus!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Unordered list</div>
                </div>
                <div class="card-body">
                    <ul>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret
                            <ul>
                                <li>lorem ipsum doloret</li>
                                <li>lorem ipsum doloret</li>
                                <li>lorem ipsum doloret</li>
                            </ul>
                        </li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Ordered list</div>
                </div>
                <div class="card-body">
                    <ol>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Unordered list</div>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret
                            <ul>
                                <li>lorem ipsum doloret</li>
                                <li>lorem ipsum doloret</li>
                                <li>lorem ipsum doloret</li>
                            </ul>
                        </li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                        <li>lorem ipsum doloret</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Blockquotes</div>
                </div>
                <div class="card-body">
                    <blockquote class="blockquote">
                        <p>Maecenas id tellus felis. Phasellu s eu magna ornare, ultrices metus yet odio. Cras
                            et lectus
                            vitae
                            diam rutrum hendrerit.</p>
                    </blockquote>
                    <blockquote class="blockquote">
                        <p>Fusce bibendum in velit nec ullamcorper. Nullam elementum erat eu nisi venenatis
                            elementum.
                            Suspendisse maximus.</p>
                        <footer class="blockquote-footer">Julius Cesar</footer>
                    </blockquote>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Text elements</div>
                </div>
                <div class="card-body">
                    <p>You can use the mark tag to
                        <mark>highlight</mark>
                        text.
                    </p>
                    <p><s>This line of text is meant to be treated as deleted</s></p>
                    <p><u>This line of text will render as underlined.</u></p>
                    <p>
                        <small>This line of text is meant to be treated as fine print.</small>
                    </p>
                    <p>The following snippet of text is <strong>rendered as bold text.</strong></p>
                    <p>The following snippet of text is <em>rendered as italicized text.</em></p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Text color</div>
                </div>
                <div class="card-body">
                    <p class="text-muted">This is an example of muted text.</p>
                    <p class="text-success">This is an example of success text.</p>
                    <p class="text-info">This is an example of info text.</p>
                    <p class="text-warning">This is an example of warning text.</p>
                    <p class="text-danger">This is an example of danger text.</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Addresses</div>
                </div>
                <div class="card-body">
                    <address><strong>Twitter, Inc. <br>
                    </strong>1355 Market Street, Suite 900 <br>
                        San Francisco, CA 94103 <br>
                        <abbr title="Phone">P: </abbr>(123) 456 7890
                    </address>
                    <address><strong>Full name <br>
                    </strong><a>first.last@example.com</a></address>
                </div>
            </div>
        </div>
    </div>
</div>
